<script src="../../build/3Dmol.js"></script>
<style>
    .mol-container {
        width: 100%;
        height: 800px;
        position: relative;
    }
</style>
<div id="container-01" class="mol-container"></div>
<script>

    let element = $('#container-01');
    let config = { backgroundColor: 'white' };
    let viewer = $3Dmol.createViewer(element, config);

    let lines = [
        [[0, 0, 0], [10, 0, 0,]],
        [[10, 0, 0], [10, 10, 0,]],
        [[10, 10, 0], [0, 10, 0,]],
        [[0, 10, 0], [0, 0, 0,]],

        [[0, 0, 10], [10, 0, 10,]],
        [[10, 0, 10], [10, 10, 10,]],
        [[10, 10, 10], [0, 10, 10,]],
        [[0, 10, 10], [0, 0, 10,]],

        [[0, 0, 0], [0, 0, 10,]],
        [[10, 0, 0], [10, 0, 10,]],
        [[10, 10, 0], [10, 10, 10,]],
        [[0, 10, 0], [0, 10, 10,]],
    ]
    for (let i = 0; i < 12; i++) {
        a = viewer.addLine({
            start: {
                x: lines[i][0][0],
                y: lines[i][0][1],
                z: lines[i][0][2]
            },
            end: {
                x: lines[i][1][0],
                y: lines[i][1][1],
                z: lines[i][1][2]
            }
        });
        // console.log(a)
    }

    viewer.addSphere({
        center: { x: 10, y: 10, z: 10 },
        radius: 1.0,
        color: 'red',
        clickable: true,
        callback: () => {
            alert(123)
        }
    })

    viewer.setProjection('orthographic')
    viewer.zoomTo();
    viewer.render();
    viewer.zoom(0.8, 0);
</script>